<template>
  <div>
    <div class="box">
      <div class="box-left">
        <h3 style="font-size: 36px; color: orange">3.9</h3>
        <h3>综合评分</h3>
        <h3 style="font-size: 12px; color: #ccc">高于周边商家69.2%</h3>
      </div>
      <div class="box-right">
        <div class="stbox">
          服务态度

          <van-rate
            v-model="value"
            :size="20"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />

          <span style="color: orange">3.9</span>
        </div>
        <div class="stbox">
          服务态度
          <van-rate
            class="stbox1"
            v-model="value"
            :size="20"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />

          <span style="color: orange">3.9</span>
        </div>
        <div>送达时间44分钟</div>
      </div>
    </div>
    <div class="gongju"></div>
    <div>
      <!-- 评价列表 -->

      <div class="allp">
        <div style="background: red" @click="fn1">全部{{ quanbu.length }}</div>
        <div style="background: green" @click="fn">满意{{ manyi.length }}</div>
        <div style="background: orange" @click="fn2">
          不满意{{ bumanyi.length }}
        </div>
      </div>
      <div class="disp">
        <div @click="changebox" :style="bg" class="disp2">
          <van-icon name="success" />
        </div>
        <div>只有内容的评价</div>
      </div>

      <div></div>
    </div>
    <!-- 评论详情 -->

    <div class="cvbox" v-for="(item, i) in abc" :key="i">
      <img :src="item.avatar" alt="图片加载失败" />
      <div>
        <div>{{ item.username }}</div>
        <div class="cvbox1">
          <van-rate
            v-model="value"
            :size="10"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />
          <div class="songda">{{ item.deliveryTime }}分钟送达</div>
        </div>
        <div class="pinlun">
          {{ item.text }}
        </div>

        <div class="zhou">
          <van-icon
            class="fnww"
            :style="item.rateType == 0 ? '' : 'transform: rotatex(90deg);'"
            name="good-job-o"
            :color="item.rateType == 0 ? '#1989fa' : ''"
            :size="22"
          />

          <div v-for="(value, i) in item.recommend" :key="i">{{ value }}</div>
        </div>
      </div>
      <!-- 时间 -->
      <div class="timm">
        {{ item.rateTime | dateformat("YYYY-MM-DD HH:mm:ss") }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["getspac"],

  data() {
    return {
      value: 4,
      radio: "1",
      checked1: false,
      //定义一个样式
      bg: "background:#ccc;",
      //满意的属性
      manyi: [],
      //不满意的属性、
      bumanyi: [],
      quanbu: [],
      abc: [],
      youzi: [],
      //点赞功能
      //设置的css样式
      //这是旋转功能
    };
  },
  methods: {
    //这是点击筛选有评论的函数
    changebox() {
      if (this.bg == "background:#ccc;") {
        this.bg = "background:blue;";
        this.abc = this.youzi;
      }else{
              this.bg = "background:#ccc;";
      this.abc = this.quanbu;
      }

    },
    fn() {
      this.abc = this.manyi;
    },
    fn2() {
      //过滤不满意的属性

      this.abc = this.bumanyi;
    },
    fn1() {
      this.abc = this.quanbu;
    },
  },
  created() {
    this.quanbu = this.getspac;
    this.abc = this.quanbu;

    this.bumanyi = this.getspac.filter((item) => {
      if (item.rateType == 1) {
        return item;
      }
    });

    //过滤满意的属性
    this.manyi = this.getspac.filter((item) => {
      if (item.rateType == 0) {
        return item;
      }
    });
    //过滤没有文字
    this.getspac.forEach((item) => {
      if (item.text) {
        this.youzi.push(item);
      }
    });
  },
};
</script>


<style lang="less" scoped>
.box {
  transform: rotate();
  margin-top: 20px;
  display: flex;
  .box-left {
    text-align: center;
    width: 150px;
    padding: 0px 15px;
    box-sizing: border-box;
    h3 {
      padding: 4px;
      box-sizing: border-box;
    }
  }
  .box-right {
    flex: 1;
    padding: 0px 10px;
    box-sizing: border-box;
    border-left: 1px solid #cccccc;
    div {
      padding: 4px 0px;
    }
  }
}
.stbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .stbox1 {
    padding: 0px 4px;
    box-sizing: border-box;
  }
}
.allp {
  display: flex;
  padding-left: 20px;
  box-sizing: border-box;

  div {
    margin-right: 10px;
    text-align: center;
    background: greenyellow;
    color: #ffffff;
    line-height: 40px;
    width: 80px;
  }
}
//工具函数
.gongju {
  height: 20px;
  background: #eee;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  margin: 20px 0px;
}
//这是内容评价
.pinglun {
  margin-top: 20px;
  display: flex;
  padding: 20px 0px 20px 20px;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  box-sizing: border-box;
}
.cvbox {
  position: relative;
  display: flex;
  padding: 15px 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #cccccc;

  img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
  }
  div {
    margin-left: 10px;
  }
}
.cvbox1 {
  display: flex;
  position: relative;
}
.zhou {
  display: flex;
  font-size: 14px;
  flex-wrap: wrap;
  padding-top: 3px;
  box-sizing: border-box;

  div {
    background: #eee;
    color: #ffffff;
    border: 1px solid #dddddd;
    line-height: 20px;
    height: 20px;
    width: 40px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.songda {
  font-size: 14px;
  color: #ddd;
}
.pinlun {
  margin: 10px 0px 10px 20px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2px;
}
.timm {
  position: absolute;
  font-size: 12px;
  right: 10px;
  top: 6px;
}
.img-icon {
  height: 20px;
  background: none;
  border: 0px;
}
.disp {
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  margin: 15px 0px;
  .disp2 {
    position: relative;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #ddd;
    border: 1px solid #cccccc;
    display: block;
    margin-right: 6px;
    i {
      position: absolute;
      left: 0;
      top: 0;
      transform: translate(-16%, -10%);
      color: #ffffff;
      padding: 5px;
      box-sizing: border-box;
    }
  }
}
</style>